<div class="table-settings">
  <nz-table 
    #basicTable 
    [nzData]="columns" 
    [nzShowPagination]="false"
    [nzScroll]="{ y: '400px' }"
  >
    <thead>
      <tr>
        <th [nzWidth]="'200px'">{{ l('BasicArchives::UI:TableSettings.Column.Name') }}</th>
        <th [nzWidth]="'120px'">{{ l('BasicArchives::UI:TableSettings.Column.Width') }}</th>
        <th [nzWidth]="'100px'">{{ l('BasicArchives::UI:TableSettings.Column.Show') }}</th>
        <th [nzWidth]="'140px'">{{ l('BasicArchives::UI:TableSettings.Column.Fixed') }}</th>
        <th [nzWidth]="'80px'">{{ l('BasicArchives::UI:TableSettings.Column.Order') }}</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let column of columns">
        <td>{{ l('BasicArchives::ModelTitle:' + entityConfig.entityType + '.' + column.name) }}</td>
        <td>
          <nz-input-number 
            [(ngModel)]="column.width" 
            [nzMin]="50"
            [nzStep]="10"
            [nzSize]="'small'"
            style="width: 90px"
          ></nz-input-number>
        </td>
        <td>
          <nz-switch [(ngModel)]="column.show" [nzSize]="'small'"></nz-switch>
        </td>
        <td>
          <nz-select
            [ngModel]="column.fixed"
            (ngModelChange)="onFixedChange(column, $event)"
            [nzSize]="'small'"
            style="width: 120px"
          >
            <nz-option 
              *ngFor="let option of fixedOptions"
              [nzValue]="option.value"
              [nzLabel]="l(option.label)"
            ></nz-option>
          </nz-select>
        </td>
        <td>
          <nz-input-number 
            [(ngModel)]="column.order" 
            [nzMin]="0"
            [nzStep]="1"
            [nzSize]="'small'"
            style="width: 60px"
          ></nz-input-number>
        </td>
      </tr>
    </tbody>
  </nz-table>
</div>

<div class="modal-footer">
  <button nz-button (click)="cancel()">{{ l('BasicArchives::UI:TableSettings.Button.Cancel') }}</button>
  <button nz-button nzType="primary" (click)="saveSettings()">{{ l('BasicArchives::UI:TableSettings.Button.Save') }}</button>
</div> 